<template>
  <div>
    <div>
      <mt-header title="修改昵称" style="background: linear-gradient(#000000, #035838);">
        <mt-button icon="back" slot="left" @click="goBack()">返回</mt-button>
      </mt-header>
    </div>
    <div>
      <mt-field label="用户名" placeholder="请输入用户名" v-model="nickname"></mt-field>
    </div>
    <div class="promoters-button">
      <button class="mint-button mint-button--default mint-button--large is-plain" @click="updateNikename()">
        <label class="mint-button-text">保存</label>
      </button>
    </div>
  </div>
</template>
<script>
import axios from "axios";

export default {
  data() {
    return {
      nickname: this.$route.query.rq
    };
  },
  props: {},
  watch: {},
  mounted() {},
  created() {
    // 该方法用来更改tabbarshow的值 用来 展示、隐藏底部 tabbar (boolean为0 展示、boolean为1 隐藏)
    this.$store.dispatch("showTabbar", { boolean: "1" });
  },
  methods: {
    goBack() {
      history.go(-1);
    },
    updateNikename() {
      console.log(this.nickname);
      let global_members_id = JSON.parse(
        localStorage.getItem("global_members_id")
      );
      let nickname = this.nickname;
      axios({
        method: "post",
        url: "/api/updategrxx/grxxbj.htm",
        params: {
          id: global_members_id,
          nicheng: nickname
        }
      }).then(res => {
        res = res.data;
        if (res.zt === "true") {
          localStorage.setItem("global_username", JSON.stringify(nickname));
          history.go(-1);
        } else {
          Indicator.close();
          let instance = Toast({
            message: "更新失败"
          });
          setTimeout(() => {
            instance.close();
          }, 2000);
        }
      });
    }
  }
};
</script>
<style scoped>
.promoters-button {
  height: 150px;
  width: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
}
</style>